<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper" @click.self="$emit('close')">
                <div class="modal-container">
                    <div class="modal-header">
                        <slot name="header">
                            default header
                        </slot>
                    </div>
                    <div class="modal-body">
                        <slot name="body">
                            default body
                        </slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer">
                            default footer
                            <button class="modal-default-button" @click="$emit('close')">
                                OK
                            </button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecamscript-6">
export default {
    data() {
        return {

        }
    },
    components: {

    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin'
.modal-mask
    position fixed
    z-index 9998
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(0, 0, 0, 0.5)
    display table
    transition opacity 0.3s ease
    .modal-wrapper
        display table-cell
        vertical-align middle
        .modal-container
            width 80%
            margin 0px auto
            padding 20px 30px
            background-color #fff
            border-radius 2px
            box-shadow 0 2px 8px rgba(0, 0, 0, 0.33)
            transition all 0.3s ease
            font-family Helvetica, Arial, sans-serif
            .modal-header
                margin-top 0
                color #42b983
            .modal-body
                margin 20px 0
            .modal-footer
                overflow hidden
                .modal-default-button
                    float right
                    color #fff
                    background-color #4aae9b
                    border 1px solid #4aae9b
                    border-radius 2px
                    background-color #4dae9b
                    extent-click()
.modal-enter-active, .modal-leave-active
    transition all 0.3s
.modal-enter, .modal-leave-to
    transform scale(1.1)
    opacity 0
</style>


